import { motion } from 'framer-motion';
import { useAppStore } from '@/stores/appStore';

interface ErrorDisplayProps {
  error: string;
}

export function ErrorDisplay({ error }: ErrorDisplayProps) {
  const { setError } = useAppStore();
  
  const handleRetry = () => {
    setError(null);
    window.location.reload();
  };
  
  const handleReport = () => {
    const bugReportUrl = `mailto:support@example.com?subject=ZK Demo Error&body=Error: ${encodeURIComponent(error)}%0A%0AUser Agent: ${encodeURIComponent(navigator.userAgent)}%0ATimestamp: ${new Date().toISOString()}`;
    window.open(bugReportUrl, '_blank');
  };
  
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.3 }}
      className="min-h-screen bg-slate-900 flex items-center justify-center p-6"
    >
      <div className="max-w-md w-full">
        <div className="glass-effect rounded-2xl p-8 text-center">
          {/* Error icon */}
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
            className="w-20 h-20 mx-auto mb-6 bg-red-500/20 rounded-full flex items-center justify-center"
          >
            <span className="text-4xl">⚠️</span>
          </motion.div>
          
          {/* Error title */}
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="text-2xl font-bold text-white mb-4"
          >
            出现了一些问题
          </motion.h1>
          
          {/* Error message */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            className="mb-6"
          >
            <p className="text-gray-300 mb-4">
              系统遇到了错误，请尝试重新加载页面。
            </p>
            <div className="bg-red-950/50 border border-red-800 rounded-lg p-4 text-left">
              <p className="text-red-300 text-sm font-mono break-words">
                {error}
              </p>
            </div>
          </motion.div>
          
          {/* Action buttons */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="space-y-3"
          >
            <button
              onClick={handleRetry}
              className="w-full bg-quantum-blue hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200"
            >
              🔄 重新加载
            </button>
            
            <button
              onClick={handleReport}
              className="w-full bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200"
            >
              📧 报告问题
            </button>
            
            <button
              onClick={() => setError(null)}
              className="w-full text-gray-400 hover:text-white font-medium py-2 transition-colors duration-200"
            >
              继续使用
            </button>
          </motion.div>
          
          {/* Help text */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.8 }}
            className="mt-8 pt-6 border-t border-gray-700"
          >
            <p className="text-gray-500 text-sm">
              如果问题持续存在，请检查网络连接或尝试使用其他浏览器。
            </p>
            <div className="mt-3 flex items-center justify-center space-x-4 text-xs text-gray-600">
              <span>Chrome 建议</span>
              <span>•</span>
              <span>启用 JavaScript</span>
              <span>•</span>
              <span>清除缓存</span>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.div>
  );
}